import React, { Component } from 'react'

import ReactAce from 'react-ace'
import 'brace/mode/python'
import 'brace/theme/solarized_light'
import 'brace/theme/monokai'
import 'brace/ext/language_tools'

class App extends Component {
    state = {
        hide: false,
    }

    editor = null

    handleClick() {
        this.props.dispatch({
            type: 'LOAD_USER',
        })
    }

    render() {
        const { value, theme, onChange, disabled, fontSize } = this.props
        return (
            <ReactAce
                ref={v => (this.editor = v)}
                mode="python"
                width="100%"
                height="100%"
                theme={theme}
                fontSize={fontSize || 22}
                onChange={onChange}
                name="ace_edit"
                value={value}
                showPrintMargin={false}
                debounceChangePeriod={300}
                highlightActiveLine={true}
                readOnly={disabled}
                setOptions={{
                    enableBasicAutocompletion: true,
                    enableLiveAutocompletion: true,
                    enableSnippets: false,
                    showLineNumbers: true,
                    tabSize: 4,
                    useSoftTabs: true,
                }}
                editorProps={{
                    $blockScrolling: 'Infinity',
                }}
            />
        )
    }
}

export default App



// WEBPACK FOOTER //
// ./src/containers/AceEditor.js